<template>
  <div id="detail">

    <DetailNavBar class="detailNavBar" @titleClick="titleClick($event)"  ref="nav"></DetailNavBar>
    <!--    <h2>{{iid}}</h2>    :probeType 不加:全部都是字符串处理-->
    <Scroll class="content"
            ref="scroll"
            :probeType="3"
    @scroll="contentScroll">
      <DetailSwiper :topImages="topImages"></DetailSwiper>
      <DetailBaseInfo :goods="goods"></DetailBaseInfo>
      <DetailShopInfo :shop="shop" ></DetailShopInfo>
      <DetailGoodsInfo :detailInfo="detailInfo"
                       @imageLoad="imageLoad"></DetailGoodsInfo>
      <DetailParamInfo ref="param" :paramInfo="paramInfo"></DetailParamInfo>
      <detail-comment-info ref="comment" :comment-info="commentInfo"></detail-comment-info>
      <DetailRecommendInfo ref="recommend" :recommend-list="recommendList"></DetailRecommendInfo>
    </Scroll>
    <detail-bottom-bar @addToCart="addToCart"></detail-bottom-bar>
<!--    <back-top @backTop="backTop" class="back-top" v-show="showBackTop">
&lt;!&ndash;      <img src="~assets/img/common/top.png" alt="">&ndash;&gt;
    </back-top>-->
    <back-top @click.native="backClick" v-show="isShowBackTop"/>
    <Toast :message="message" :isShow="isShowToast" ></Toast>
  </div>
</template>

<script>
  import DetailNavBar from "./childComps/DetailNavBar";
  import DetailSwiper from "./childComps/DetailSwiper";
  import DetailBaseInfo from "./childComps/DetailBaseInfo";
  import DetailShopInfo from "./childComps/DetailShopInfo";
  import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
  import DetailParamInfo from "./childComps/DetailParamInfo";

  import DetailCommentInfo from './childComps/DetailCommentInfo'
  import DetailRecommendInfo from './childComps/DetailRecommendInfo'
  import BackTop from '@/components/content/backTop/BackTop'
  //展示推荐信息的
  import DetailBottomBar from './childComps/DetailBottomBar'
  import  Toast from '@/components/common/toast/Toast'

  import {getDetail,GoodsParam,Goods,Shop,getRecommend} from '@/network/detail.js'
  import Scroll from "@/components/common/scroll/Scroll";
  import {debounce} from '@/common/Utils'
  export default {
    //exclude = "name值"
    name: "Detail",
    components:{
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      DetailShopInfo,
      DetailGoodsInfo,
      DetailParamInfo,
      Scroll,
      DetailCommentInfo,
      DetailRecommendInfo,

      DetailBottomBar,
      Toast,
      BackTop
    },
    data(){
      return{
        iid:null,
        topImages:[],
        goods:{},
        shop:{},
        detailInfo:{},
        paramInfo:{},
        commentInfo: {},
        recommendList: [],
        //详情页每个主题对应的高度位置 这里是谁谁的offsetTop的值
        themeTopY:[],
        getThemeTopY:null,
        //防抖的currentIndexs
        currentIndexs: 0,
        isShowBackTop:false,  //一开始不让返回顶部的图标出现

        message:'',
        isShowToast:false
      }
    },
    created() {
        //1:获取iid 这个形参名字要与路由中的一致
        this.iid = this.$route.params.iid
        // this.iid = this.$router.query.iid(这种写法要在GoodsListItem里面push对应路由)
        //2.1:根据iid获取详情信息
        getDetail(this.iid).then((res)=>{
          console.log(res)
          //做个转接
          const data = res.result;
          this.topImages = res.result.itemInfo.topImages
          // console.log( this.topImages)
          //2.2:创建goods对象 里面保存所需要展示的信息,将goods传给BaseInfo组件
          this.goods = new Goods(data.itemInfo,data.columns,data.shopInfo.services)
          // console.log( this.goods)
          //2.3:获取店铺相关信息
          this.shop = new Shop(data.shopInfo);
          // 2.4.获取商品信息
          this.detailInfo = data.detailInfo
          // 2.5.保存参数信息
          this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule);
          // 2.6保存评论信息
          if (data.rate.list) {
            this.commentInfo = data.rate.list[0];
          }
          //2.7请求推荐数据
          getRecommend().then((res, error) => {
            if (error) {
              return
            }
            else {
              console.log(res);
              this.recommendList = res.data.list
            }

          })

      /*  获取所有主题的offsetTop
          问题:在哪里才能获取到正确的offsetTop
          1.created肯定不行,压根不能获取元素
          2.mounted也不行,数据还没有获取到
          3.获取到数据的回调中也不行,DOM还没有渲染完
          4.$nextTick也不行,因为图片的高度没有被计算在类
          5.在图片加载完成后,获取的高度才是正确*/
          //获取主题高度 防抖函数是为了防止一个函数过多的重复执行
          this.getThemeTopY = debounce(()=>{
            console.log('++++')
            //这个不要在created或者mounted里面执行
            this.themeTopY.push(0)
            // 获取Vue实例(this.$refs.param)关联的DOM元素,offsetTop是组件的高度属性★★★★
            this.themeTopY.push(this.$refs.param.$el.offsetTop)
            this.themeTopY.push(this.$refs.comment.$el.offsetTop)
            this.themeTopY.push(this.$refs.recommend.$el.offsetTop)
            this.themeTopY.push(Number.MAX_VALUE)
          },100)
        })

    },
    //这里执行请求高度
    /*updated() {
      this.getOffsetTops();
    },*/
    methods:{
    /*  fangdouhanshu(){
        console.log('++++')
        //这个不要在created或者mounted里面执行
        this.themeTopY.push(0)
        // 获取Vue实例(this.$refs.param)关联的DOM元素,offsetTop是组件的高度属性★★★★
        this.themeTopY.push(this.$refs.param.$el.offsetTop)
        this.themeTopY.push(this.$refs.comment.$el.offsetTop)
        this.themeTopY.push(this.$refs.recommend.$el.offsetTop)
        this.themeTopY.push(Number.MAX_VALUE)
      }*/
      //主题高度值的获取(由于图片加载的慢所以还是不能在这里获取)
      getOffsetTops() {
      //可以使用定时器,但是这里不用
        // this.$nextTick将回调延迟到下次 DOM 更新循环之后执行  (依然拿不到正确的值)
          this.$nextTick(()=>{
            /*this.themeTopY.push(0)
            // 获取Vue实例(this.$refs.param)关联的DOM元素,offsetTop是组件的高度属性
            this.themeTopY.push(this.$refs.param.$el.offsetTop)
            this.themeTopY.push(this.$refs.comment.$el.offsetTop)
            this.themeTopY.push(this.$refs.recommend.$el.offsetTop)*/
            // this.themeTops.push(Number.MAX_VALUE)
          })
      },
      backClick() {
        //点击返回顶部图标生效
        //拿组件里methods  不是拿组件里面data属性的scroll方法,否则需要两次.scroll
        this.$refs.scroll.scrollTo(0, 0,1000)
      },
      //详情页DetailGoodsInfo的穿着效果那里 图片加载的慢需要处理一下
      imageLoad(){
          this.$refs.scroll.refresh();
          //执行 得到每个板块正确的高度
          this.getThemeTopY()
      },
      //①调用就写titleClick 不要加括号
      //②如果写括号里面第一个参数是$event index传给是它
      titleClick(index,a,b){
        console.log(index)
        // console.log(a)
        // console.log(b)
        this.$refs.scroll.scrollTo(0,-this.themeTopY[index],100)
      },

      contentScroll(position){

        // 监听滚动到哪一个主题
        this.listenScrollTheme(-position.y)
        //图片是否出现
        this.isShowBackTop = (-position.y) > 1000
      },
      listenScrollTheme(position){
        let length = this.themeTopY.length
        for (let i = 0;i<length ;i++){
          let iPos = this.themeTopY[i];
          // console.log(iPos,i)
          if (position>iPos && position<this.themeTopY[i+1]){
            if (this.currentIndexs != i) {
              this.currentIndexs = i;
              // console.log(this.currentIndexs)
              //最后把this.currentIndexs 传给nav里面的data下的currentIndex
              this.$refs.nav.currentIndex = this.currentIndexs
            }
            break;
          }
        }
      },
      addToCart() {
        // 1.创建对象
        const obj = {}
        // 2.对象信息
        obj.iid = this.iid;
        obj.imgURL = this.topImages[0]
        obj.title = this.goods.title
        obj.desc = this.goods.desc;
        obj.newPrice = this.goods.newPrice;
        // 3.添加到Store中(修改state里面的数据)
        // console.log(obj)
        // this.$store.commit('addCart', obj)
        //做一个toast弹窗;作用,在vuex里面做了某件事,想让外面知道,需要用promise★★★★
          this.$store.dispatch('addCart',obj).then(res=>{
            /*this.isShowToast = true
            this.message = res
            // console.log(res)
            setTimeout(()=>{
                this.isShowToast = false
                this.message = ''
            },2000)*/
            this.$toast.showToast(res,2000)
          })

        //做toast 添加购物车弹窗
      }
    },
    mounted() {
      //使用导进来的debounce  轮播图的防抖函数
      const refresh = debounce(this.$refs.scroll.refresh,300)
      //监听事件总线,图片加载完成(这个不要写在created里面)
      this.$bus.$on('itemImageLoad',()=>{
        refresh()
      })

  }
  }
</script>

<style scoped>

#detail{
  /*进入详情页时隐藏下面的 tab-bar*/
  height: 100vh;
  position: relative;
  z-index: 9;
  background: #ffffff;
}
/*解决NavBar的层级低向上滚动时覆盖它的问题*/
.detailNavBar{
  position: relative;
  z-index: 9;
  background: #fff;
}
  .content{
    position: absolute;
    top: 44px;
    bottom: 60px;
  }
</style>